import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LJHomePage(),
    );
  }
}

class LJHomePage extends StatelessWidget {
  const LJHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text("布局组件"),
        ),
      ),
      body: LJHomeContent(),
    );
  }
}

class LJHomeContent extends StatefulWidget {
  const LJHomeContent({Key key}) : super(key: key);

  @override
  _LJHomeContentState createState() => _LJHomeContentState();
}

class _LJHomeContentState extends State<LJHomeContent> {
  @override
  Widget build(BuildContext context) {
    // Flex 直接使用非常少
    // Axis.vertical: Column y verticalDirection
    // Axis.horizontal: Row x textDirection
    /*
    * MainAxisAlignment:
    * start 主轴开始挨个排放
    * end 主轴结束****
    * center 主轴中心点对齐
    * spaceBetween 左右两边间距为零 其他元素平分间距
    * spaceAround 左右两边间距是其他元素间距的一半
    * spaceEvenly 所有间距平分间距
    * CrossAxisAlignment:
    * start 交叉轴开始对齐
    * end 交叉轴结束对其
    * center 交叉轴中心对齐
    * baseline 基线对齐（必须要有文本才起效果）
    * stretch 将row高度拉伸到最大
    * */
    return RowDemo2();
  }
}

class RowDemo2 extends StatelessWidget {
  const RowDemo2({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: [
        Flexible(
            fit: FlexFit.tight,
            child: Container(width: 80, height: 60, color: Colors.red,)
        ),
        Flexible(
            fit:FlexFit.tight,
            child: Container(width: 100, height: 70, color: Colors.blue,)
        ),
        Container(width: 70, height: 60, color: Colors.orange,),
        Container(width: 90, height: 120, color: Colors.black,),
      ],
    );
  }
}

//row的基本使用
class RowDemo1 extends StatelessWidget {
  const RowDemo1({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(width: 80, height: 60, color: Colors.red,),
        Container(width: 120, height: 70, color: Colors.blue,),
        Container(width: 70, height: 60, color: Colors.orange,),
        Container(width: 90, height: 120, color: Colors.black,),
      ],
    );
  }
}

class ButtonRowDemo extends StatelessWidget {
  const ButtonRowDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        TextButton(
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.blue)
            ),
            onPressed: () {
              print("row和button的使用");
            },
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  Icons.bug_report,
                  color: Colors.white,
                ),
                Text(
                  "bug报告",
                  style: TextStyle(color: Colors.white),
                )
              ],
            ))
      ],
    );
  }
}

class AlignDemo extends StatelessWidget {
  const AlignDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: Align(
            alignment: Alignment(-1, 0),
            child: Icon(
              Icons.pets,
              size: 50,
            )));
  }
}
